<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="city">
        <option value="">----请选择城市-----</option>
        <option value="北京市">北京市</option>
        <option value="河北省">河北省</option>
        <option value="辽宁省">辽宁省</option>
        <option value="山东省">山东省</option>
    </select>
    <select id="address">
    </select>
</body>
    <script>
        const date ={
            "北京市":["朝阳区","海淀区","丰台区"],
            "河北省":["石家庄","唐山","保定"],
            "辽宁省":["沈阳","大连","鞍山"],
            "山东省":["青岛","济南","烟台"]
        }
        window.onchange = function (){
            var city = document.getElementById("city").value
            if(city!=""){
                var citys = date[city]
            }else {
                var citys = []
            }
            var address = document.getElementById("address")
            address.innerHTML = ""
            for (var i =0;i<citys.length;i++){
                var add = document.createElement("option")
                add.innerHTML = citys[i]
                address.appendChild(add)
            }
        }
    </script>
</html>